<!Doctype html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
    <script>
        // alert(123)
        // console.log(form);

        window.onload = function(){
            console.log(form);
        }
    </script>
</head>
<style> 
#box{
    width: 200px;
    height: 200px;
    background-color: #0f0;
}
</style>
<body>
<!-- <div id="box">这是盒子</div>
<p id="part"></p>
<input type="text" id="username" value="请输入用户名">
<select id="province">
    <option value="0">请选择省份</option>
    <option value="">河南省</option>
    <option value="">河北省</option>
    <option value="">湖北省</option>
    <option value="">湖南省</option>
</select> -->


<form action="" id="form">
    <table align="center">
        <caption><h2>登陆</h2></caption>
        <tr>
            <td>用户名：</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" name="password"></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="reset">
                <input type="submit">
            </td>
        </tr>
    </table>
</form>
</body>
<script>
// 1.事件源 - 标签
// 使用标签的id名来代表这个标签

// console.log(box);
// console.log(part);

// 2.事件类型
// 鼠标类
// 左键单击 - click
// box.onclick = function(){
//     console.log(123);
// }

// 双击 - dblclick
// box.ondblclick = function(){
//     console.log("双击了");
// }

// 鼠标移入-mouseover
// box.onmouseover = function(){
//     console.log("移入了");
// }

// // 鼠标移出 - mouseout
// box.onmouseout = function(){
//     console.log("移出了");
// }

// 键盘类
// 键盘按下 - keydown
// window 代表当前整个浏览器窗口
// window.onkeydown = function(){
//     console.log(123);
// }

// 键盘抬起 - keyup
// window.onkeyup = function(){
//     console.log("松开了");
// }

// 表单事件
// 获取焦点 - focus - 光标点到了某个标签中，这个标签就获取了焦点
// username.onfocus = function(){
//     // console.log("放进去了");
//     // if(this.value == '请输入用户名'){
//     //     this.value = '';
//     // }
    
// }

// 失去焦点 - blur
username.onblur = function(){
    console.log("点出去了");
    if(this.value == ''){
        this.value = '请输入用户名';
    }
    console.log(this); /// this在事件函数中，代表当前事件的事件源
}

// 在js中有一个关键字 叫this
// console.log(this); // 全局中的this，代表当前浏览器窗口 window

// 下拉框选项改变 - change
province.onchange = function(){
    console.log("改变了省份");
}

// 表单提交事件 - submit - 通常用来验证表单
var onOff = false
form.onsubmit = function(){
    console.log("即将要提交,应该验证表单了");

    if(!onOff){
        return false // 不让表单提交
    }
}



// window的事件-load
// 这个事件是当网页中所有的内容都加载完成以后，再来加载这个事件
window.onload = function(){
    console.log("所有内容都加载好了");
}
</script> 
</html>